Skeleton Screens 骨架屏

骨架屏是一種設計模式，用於頁面載入時佔位，向使用者提供頁面佈局的視覺提示。其作用是減少使用者對長時間載入的感知，並幫助使用者預期頁面內容的結構。骨架屏通常用於完整頁面載入的情況。

骨架屏主要有以下三種型別：

靜態內容和影象骨架屏：最常見的骨架屏型別，以灰色框模擬頁面佈局，使使用者預期內容層次結構。

動畫骨架屏：以漸變或閃爍動畫來提示載入狀態，透過動態效果減輕使用者的等待感。

框架式骨架屏：僅顯示頁面的頭部和底部框架，不包含內容的佔位框。由於幾乎是空白狀態，這類骨架屏並不能有效地提示頁面結構，因此不推薦使用。

使用骨架屏的幾個關鍵好處包括：

減少使用者對頁面故障的誤解：骨架屏在載入時提供佔位符，避免空白頁面讓使用者誤以為載入出錯，從而提升留存率。

縮短等待時間的感知：骨架屏使載入過程看起來像逐步填充的頁面，降低長時間等待的挫敗感。

降低使用者的認知負擔：骨架屏讓使用者在載入過程中逐步構建對頁面結構的心理模型，避免空白頁突然轉換為資訊密集的完整頁面，減輕使用者的視覺和認知壓力。

骨架屏 vs 進度條 vs 載入動畫

骨架屏、進度條和載入動畫都提示頁面載入狀態，但適用場景不同：

1. 等待時長決定使用型別

2–10秒：頁面載入時間在此範圍內，骨架屏和載入動畫均可使用。

超過10秒：進度條更適合，因其提供具體的等待時間，能有效降低使用者的焦躁。

骨架屏更適合用於完整頁面載入，而載入動畫適用於特定模組（如影片或卡片）的載入提示。

2. 快速載入的頁面無需骨架屏或載入動畫

如果頁面載入少於1秒，骨架屏或載入動畫反而會顯得多餘，快速閃爍的載入螢幕可能讓使用者產生跟不上頁面的感覺。

3. 進度條最適合指示過程類操作

對於下載、上傳或檔案轉換等涉及多個步驟的過程，進度條比骨架屏更適用，使用者能更清晰地看到進度，避免混淆。

4. 避免使用框架式骨架屏

框架式骨架屏只顯示頭部和底部，沒有內容佔位符，容易讓使用者誤以為頁面載入失敗，應避免使用。

結論：骨架屏在等待時間適中的情況下有效緩解使用者的不耐煩情緒，但不能替代對頁面效能的最佳化。骨架屏只是一個提升使用者載入體驗的工具，適合用於減少中等等待時間的使用者焦慮。